<template>
  <div class="container">
    <el-steps :active="active" align-center class="steps">
      <el-step description="进入企业应用管理" />
      <el-step description="填写Secret" />
    </el-steps>
    <AddressConfig :secretType="resData.secretType" :resData="resData.defaultShow" />
    <div class="btn_box">
      <el-button type="primary" @click="active++" v-if="active == 1">下一步</el-button>
      <template v-else>
        <el-button @click="active--">上一步</el-button>
        <el-button type="primary" @click="accomplish">完成配置</el-button>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
  import AddressConfig from '../guideConfig/components/AddressConfig.vue'
  import { ref, watch } from 'vue'
  import router from '@/router'
  const active = ref(1)
  const AddressConfigRef: any = ref(null)
  const resData: any = ref({
    defaultShow: [],
    secretType: 2,
    one: [
      {
        id: '1-1',
        title: '一、进入企业应用管理',
        text: '从企业微信官网进入管理后台, 扫码登录平台'
      },
      {
        id: '1-2',
        title: '',
        text: '查看「应用管理」—— 第三方是否添加 客易达SCRM'
      }
    ],
    two: [
      {
        id: '1-3',
        title: '二、填写Secret',
        text: '打开【客户联系】- 【API】- 点击secret - 点击「发送」, ',
        twoImg: '1-4',
        text2: '配置完成后请不要随意点击【重新获取】, 否则会导致配置失败'
      },
      {
        id: '',
        text: '企业管理员将企业微信收到企业微信团队发送的Secret, 请复制Secret并粘贴填写至下方',
        isShowInput: true,
        isShowImg: true,
        isTwoImg: true,
        isImgList: [
          {
            imgId: '1-5',
            qw_text: '1、在企业微信聊天界面找到【企业微信团队】'
          },
          {
            imgId: '1-6',
            qw_text: '2、点击前往查看'
          },
          {
            imgId: '1-7',
            qw_text: '3、点击「复制」'
          }
        ]
      },
      {
        id: '17',
        warning: '填写完成后别忘记在企业微信后台也要点击保存哦~'
      }
    ]
  })
  watch(
    () => active.value,
    (v: number) => {
      switch (v) {
        case 1:
          resData.value.defaultShow = resData.value.one
          break
        case 2:
          resData.value.defaultShow = resData.value.two
          break
      }
    },
    { immediate: true }
  )
  const accomplish = () => {
    // router.push({ path: '/channelconfig/qywechat/authconfig' })
    window.close()
  }
</script>
<style lang="scss" scoped>
  .container {
    width: 700px;
    margin: 0 auto;
    padding: 30px 0;

    .steps {
      margin-left: -10%;
    }
    .btn_box {
      text-align: center;
    }
    :deep .el-step__head.is-process {
      // border-color:
      border-color: var(--el-text-color-placeholder);
      color: var(--el-text-color-placeholder);
    }
    :deep .el-step__description.is-process {
      color: var(--el-text-color-placeholder);
    }
  }
</style>

<style lang="scss">
  .steps {
    .el-step__head {
      margin-bottom: 20px;
    }
  }
</style>
